<template>
    <div class="triangle-container">
        <svg width="100%" height="100%" preserveAspectRatio="none">
            <polygon
                :points="points"
                :stroke-width="strokeWidth"
                :stroke="stroke"
                :fill="fill"
            ></polygon>
        </svg>
        <div
            v-for="(item, index) in points"
            :key="index"
            class="triangle-circle"
        />
    </div>
</template>

<script>
export default {
    props: {
        strokeWidth: {
            type: Number,
            default: 1,
        },
        stroke: {
            type: String,
            default: '#000000',
        },
        fill: {
            type: String,
            default: 'rgba(0, 0, 0, 0)',
        },
        enstyle: {
            type: Object,
            default: () => ({}),
        }
    },
    computed: {
        points() {
            const { width, height } = this.enstyle;
            const { strokeWidth } = this;
            const point1 = `${Math.round(strokeWidth / 2)},${Math.round(height - strokeWidth / 2)}`;
            const point2 = `${Math.round(width - strokeWidth / 2)},${Math.round(height - strokeWidth / 2)}`;
            const point3 = `${Math.round(width / 2)},${Math.round(strokeWidth / 2)}`;
            return `${point1} ${point2} ${point3}`;
        }
    }
}
</script>

<style lang="less" scoped>
.triangle-container {
    width: 100%;
    height: 100%;
    position: relative;
    .triangle-circle{
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 8px;
        border: solid 1px #40b5f8;
    }
}
</style>